<template>
    <div class="wrapper">
        <!-- 报表标题组件-->
        <ReportTitle :titleInfo="titleInfo" :isExport="false" :isAdd="false" />
        <div class="dicMain">
            <ReportSearch ref="searchRef" :searchFormDatas="searchFormDatas" v-model:searchForm="searchForm"
                :isBtnShow="false" />
            <div class="dicFooter">
                <span class="searchBtn" @click="handleSave">保存</span>
                <span class="resetBtn" @click="handleCancel">取消</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';

import ReportTitle from '@/components/reportTitle/index.vue';
import ReportSearch from '@/components/reportSearch/index.vue';

import * as server from '@/api/modules/systemManage';
import * as local from '@/utils/cache/localStorage';
import { apiFn } from '@/utils/utilFns';

const emit = defineEmits(['updateDictionaryInfo']);

const props = defineProps({
    dictionaryInfo: {
        type: Object,
        default: {}
    }
});

// 报表标题信息
const titleInfo = reactive({
    title: '字典新增',
    description: ""
});

const searchRef = ref(null);

// 默认表单数据
const searchForm = reactive({
    dicName: '',
    dicCode: ''
});

// 查询字典类型是否存在
const queryDictionaryIsExist = (rule, value, callback) => {
    const param = { dicCode: value };
    
    server.queryDictionaryIsExist(param)
        .then((data) => {
            if (!data) {
                callback(new Error("字典类型已存在"));
            } else {
                callback();
            }
        })
        .catch(() => {
            callback(new Error("验证失败"));
        });
};

// 检索条件数据
const searchFormDatas = ref([
    {
        id: 0,
        type: 'input',
        prop: 'dicName',
        label: '字典名称',
        placeholder: '请输入字典名称',
        rules: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }]
    }, {
        id: 1,
        type: 'input',
        prop: 'dicCode',
        label: '字典类型',
        placeholder: '请输入字典类型',
        rules: [{ required: true, message: '字典类型不能为空' }, { validator: queryDictionaryIsExist, trigger: ['blur'] }]
    }
]);

onMounted(() => { });

const handleSave = () => {
    const formEl = searchRef.value.formRef;
    if (!formEl) return;

    formEl.validate((valid) => {
        if (valid) {
            saveAddedRole();
        } else {
            return false
        }
    })
};

// 添加字典
const saveAddedRole = () => {
    const { dicName, dicCode } = searchForm;
    const params = {
        orgId: local.getUser().orgId,
        dicName,
        dicCode
    };

    apiFn(server.addDictionary, params)
        .then((res) => {
            const { code } = res;
            if (code === 'success') {
                ElMessage.success('添加成功!');
                emit('updateDictionaryInfo', { type: 'list', dictionaryInfo: {} });
            }
        }).catch(() => {
            ElMessage.error('添加失败!');
        });
};

const handleCancel = () => {
    emit('updateDictionaryInfo', { type: 'list', dictionaryInfo: {} });
};

</script>